<template>
	<view class="container">
		<u-tabs 
			class="tabsList"
			:list="tabsList" 
			:is-scroll="false" 
			:current="current" 
			@change="change"
			:bold="true"   
			font-size="30"
			bar-width="100" 
			active-color="#2979ff"
			inactive-color="#000000" 
		></u-tabs>
		<lost-found-list class="lost-found-list" @lostFoundItemClick="goDetail" :list="list"></lost-found-list>
		<u-divider v-if="flag">到底啦</u-divider>
		
	</view>
</template>

<script>
	import lostFoundList from '../../components/lost-found-list/lost-found-list.vue'
	import {
		getLostFoundList
	} from '@/api/lostFound.js'
	export default {
		components: {
			"lost-found-list": lostFoundList
		},
		data() {
			return {
				tabsList: [
					{
						name: '全部'
					},{
						name: '招领'
					},{
						name: '寻物'
					}],
				current: 0,
				pageNum: 1,
				pageSize: 10,
				list: [],
				flag: false,      // 触底标识
			};
		},
		methods: {
			change(index) {
				this.current = index;
				this.pageNum = 1
				this.list = []
				this.flag = false
				this.getLostFoundList()
			},
			async getLostFoundList() {
				let params = {}
				params.pageNum = this.pageNum;
				params.pageSize = this.pageSize;
				if (this.current != 0) {
					params.type = this.current;
				}
				await getLostFoundList(params).then(res => {
					// 数据追加
					this.list = [...this.list, ...res.rows]
				})
			},
			goDetail (foundId) {
				this.$u.route('/pages/lost-found-detail/lost-found-detail', {
					foundId: foundId
				})
			}
		},
		onLoad() {
			this.getLostFoundList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.list = []
			this.pageNum = 1
			this.flag = false
			this.getLostFoundList();
			uni.stopPullDownRefresh();
		},
		// 下滑触底
		onReachBottom() {
			if (this.list.length < this.pageNum * 10) {
				return this.flag = true
			}
			this.pageNum++
			this.getLostFoundList()
		}
	}
</script>

<style lang="scss">
	@import "./lost-found.scss";
</style>
